<template>
  <div class="box">
    书架内容
    <div class="bookOfSelf">
      <dl @click = "goDetail(item)" v-for = "item of getbookN" :key = "item.id">
        <dt><img :src="decodeURIComponent(item.cover).substring(7)"> </dt>
        <dd>{{ item.title }}</dd>
      </dl>
    </div>
  </div>
</template>

<script>
export default{
  data () {
    return {
      getbook: [],
      getbookN: []
    }
  },
  mounted () {
    console.log(11111)
    console.log(this.$store.state.detail.getIdtoMy)
    localStorage.getItem('bookself')
    console.log(localStorage.getItem('bookself'))
    this.getbook = JSON.parse(localStorage.getItem('bookself'))
    console.log(this.getbook)
    for (let i = 0; i < this.getbook.length; i++) {
      var flag = true
      for (let j = 0; j < this.getbookN.length; j++) {
        if (this.getbook[i].id === this.getbookN[j].id) {
          flag = false
        }
      }
      if (flag) {
        this.getbookN.push(this.getbook[i])
      }
    }
    console.log(this.getbookN)
  },
  methods: {
    goDetail (item) {
      this.$router.push({path: `/detail?id=${item.id}`})
    }
  }
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';
.bookOfSelf{
  @include rect(100%,auto)
  @include flexbox();
  @include justify-content(flex-start);
  flex-wrap: wrap;
  @include align-items(space-around);
  dl{
    @include rect(0.8rem, auto);
    @include flexbox();
    @include flex-direction(column);
    margin: 0 0.06rem;
    dt{
      @include rect(0.8rem, auto)
      img{
        @include rect(0.8rem, auto)
      }
    }
    dd{
      @include rect(0.8rem, 0.3rem)
      line-height: 0.3rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
    }
  }
}
</style>
